<template>
    <div class="ticket-wrap">
        <div class="yd-header margin-top-8">
            <span>工单管理</span>
            <span>
                <!-- <Button v-pmis="24" class="btn-in-top-large" type="primary" @click="ticket_export()">导出清单</Button> -->
                <Button v-pmis="24" class="btn-in-top-large" type="primary" @click="modal.createVisible = true">预约安装</Button>
            </span>
        </div>

        <param-selector :model.sync="searchParams" :type="1" @search="handleSearch"></param-selector>

        <div style="position:relative">
            <Spin size="large" fix v-if="loadingData"></Spin>

            <div v-if="!list || !list.length" class="no-data">
                暂无匹配的数据
            </div>

            <div v-for='(item,index) in list' :key='index' class="margin-bottom-20" style="position:relative">
                <i class="ticket-cut-outs ticket-cut-outs-top"></i>
                <i class="ticket-cut-outs ticket-cut-outs-bottom"></i>
                <Row
                    :id="'copy1'+index"
                    class="c-ticket-item">
                    <Col span='7' class='c-ticket-item-left'>
                        <Row class='margin-bottom-23'>
                            <strong>房源编号：</strong>{{item.home_info.home_name}}
                        </Row>
                        <Row class='margin-bottom-23'>
                            <strong>详细地址：</strong>
                            {{concatLocation(item.home_info)}}
                        </Row>
                        <!-- <Row class="margin-bottom-23" v-if="item.ticket_product_statistics && item.ticket_product_statistics.length">
                            <strong>下单设备：</strong>{{item.ticket_product_statistics | ticketDeviceModel}}
                        </Row> -->
                        <Row class="margin-bottom-23">
                            <strong>设备类型：</strong>{{item.service_target | ticketDeviceType}}
                        </Row>
                        <Row>
                            <strong>房间号：</strong>
                            <span v-for="(r,index) in 3" :key="index" v-if="item.ticket_devices[index]">
                                <span v-show="index > 0"> , </span>
                                {{item.ticket_devices[index].room_name}}
                            </span>
                            <span v-if="item.ticket_devices[3]">...</span>
                            (
                            <a href="javascript:;" class="c-ticket-detail-text" @click="handleModalOpen(item, 'detail')">
                                共{{item.ticket_devices.length}}个房间
                            </a>
                            )
                        </Row>
                    </Col>
                    <Col span='7' class='c-ticket-item-center'>
                        <Row class='margin-bottom-23'>
                            <strong>安装人员：</strong>
                            {{item.implementer ? item.implementer.name:'暂无'}}
                            {{item.implementer ? item.implementer.telephone:''}}
                        </Row>
                        <Row class='margin-bottom-23'>
                            <strong>联系人：</strong>{{item.subscribe && item.subscribe.name}} {{item.subscribe && item.subscribe.phone}}
                        </Row>
                        <Row>
                            <strong>备注：</strong>{{item.subscribe && item.subscribe.note || '无'}}
                        </Row>
                        <!-- <Row class="margin-bottom-23" v-if="item.done_devices.length || item.ticket_product_statistics.length">
                            <strong>安装设备：</strong>
                            <span>
                                {{item.state === 5 ? item.ticket_product_statistics : item.done_devices | ticketInstalledDeviceModel}}
                            </span>
                        </Row> -->
                    </Col>
                    <Col span='7' class='c-ticket-item-right'>
                        <Row class='margin-bottom-23'>
                            <strong>工单编号：</strong>{{item.ticket_sn}}
                        </Row>
                        <Row class='margin-bottom-23'>
                            <strong>创建时间：</strong>{{item.created_at | date}}
                        </Row>
                        <Row class="margin-bottom-23">
                            <strong>期待上门时间：</strong>
                            {{item.subscribe.expected_time | date('YYYY-MM-DD')}}
                            ({{item.subscribe.expected_period | appointmentPeriod}})
                        </Row>
                        <Row class="margin-bottom-23" v-show="item.appointment_time">
                            <strong>预约上门时间：</strong>
                            {{item.appointment_time | date('YYYY-MM-DD')}}
                            ({{item.appointment_period | appointmentPeriod}})
                        </Row>
                        <Row>
                            <strong>工单状态：</strong>{{item.state | WOInstallStatus}}
                        </Row>
                    </Col>
                    <Col span='3' class='c-ticket-item-button'>
                        <Row class='margin-bottom-23' type='flex' justify='center'>
                            <c-icon
                                name="copy"
                                className="icon-large"
                                class="btn" :data-clipboard-target="'#copy1'+index"></c-icon>
                        </Row>
                        <Row class='margin-bottom-23' type='flex' justify='center'>
                            <Button style="width:90px" size="small" @click="handleModalOpen(item, 'detail')">查看详情</Button>
                        </Row>
                        <Row class='margin-bottom-23' type='flex' justify='center' v-if="item.state < 4">
                            <Button style="width:90px" size="small" @click="handleModalOpen(item, 'cancel')">取消工单</Button>
                        </Row>
                        <Row class='margin-bottom-23' type='flex' justify='center' v-if="item.state === 4">
                            <Button style="width:90px" size="small" @click="handleModalOpen(item, 'acceptance', true)">通过验收</Button>
                        </Row>
                        <Row class='margin-bottom-23' type='flex' justify='center' v-if="item.state === 4">
                            <Button style="width:90px" size="small" @click="handleModalOpen(item, 'acceptance', false)">驳回验收</Button>
                        </Row>
                        <Row class='margin-bottom-23' type='flex' justify='center' v-if="item.state === 5">
                            <Button style="width:90px" size="small" @click="handleModalOpen(item, 'evaluate')">评价</Button>
                        </Row>
                        <Row class='margin-bottom-23' type='flex' justify='center'>
                            <c-icon
                                v-show="!item.is_opened"
                                :name="item.hover ? 'down-active' : 'down'"
                                className="icon-large"
                                @click="open(item)"></c-icon>
                            <c-icon
                                v-show="item.is_opened"
                                :name="item.hover ? 'up-active' : 'up'"
                                className="icon-large"
                                @click="item.is_opened = false"></c-icon>
                        </Row>
                    </Col>
                </Row>

                <timeline
                    v-show="item.is_opened"
                    :opening="opening"
                    :type="item.service_type"
                    :list="Workflow[item.id]">
                </timeline>
            </div>
        </div>

        <create-appointment-modal
            :show.sync="modal.createVisible"
            @refresh="search(1)"></create-appointment-modal>

        <appointment-detail-modal
            :show.sync="modal.detailVisible"
            :ticket-id="modal.ticket && modal.ticket.id"></appointment-detail-modal>

        <evaluate-modal
            :show.sync="modal.evaluateVisible"
            :ticket.sync="modal.ticket"
            @refresh="search(pagination.current)"></evaluate-modal>

        <acceptance-modal
            :result="modal.acceptanceResult"
            :show.sync="modal.acceptanceVisible"
            :ticket.sync="modal.ticket"
            @refresh="search(pagination.current)"></acceptance-modal>

        <cancel-modal
            :show.sync="modal.cancelVisible"
            :ticket.sync="modal.ticket"
            @refresh="search(pagination.current)"></cancel-modal>

        <Page
            :current.sync="pagination.current"
            :total="pagination.total"
            :page-size="pagination.limit"
            show-elevator
            show-total
            style="text-align:center"
            class='margin-top-10'
            @on-change='search'></Page>
    </div>
</template>
<script type="text/javascript">
import Clipboard from '../../../../node_modules/clipboard/dist/clipboard'
import util from '@/libs/util'
import { http, api } from '@/libs/http'
import timeline from '../components/timeline'
import acceptanceModal from './acceptanceModal'
import evaluateModal from './evaluateModal'
import appointmentDetailModal from './appointmentDetailModal.vue'
import createAppointmentModal from './createAppointment.vue'
import cancelModal from './cancelModal'
import paramSelector from '../components/param-selector'

export default {
  name: 'appointment',
  components: {
    timeline,
    acceptanceModal,
    evaluateModal,
    appointmentDetailModal,
    createAppointmentModal,
    cancelModal,
    paramSelector
  },
  mounted () {
    this.search()
  },
  data () {
    const clipboard = new Clipboard('.btn')
    clipboard()
    return {
      loadingData: false,
      list: [],
      searchParams: {},
      pagination: {
        total: 0,
        current: 1,
        limit: 10
      },
      Workflow: {},
      appointment: false,
      afterSevice: false,
      opening: false,
      currentOpened: null,
      modal: {
        createVisible: false,
        acceptanceVisible: false,
        detailVisible: false,
        evaluateVisible: false,
        acceptanceResult: true,
        cancelVisible: false
      }
    }
  },
  methods: {
    concatLocation: util.concatLocation,
    open (obj) {
      if (this.currentOpened) {
        this.currentOpened.is_opened = false
      }
      this.Workflow = {}
      this.currentOpened = obj
      obj.is_opened = true
      this.opening = true
      http.request(this, api.ticket_history, [obj.id], null, (res, err) => {
        this.opening = false
        if (!res || err) {
          return
        }
        this.$set(this.Workflow, obj.id, res)
      })
    },
    handleSearch () {
      this.pagination.current = 1
      this.search(this.pagination.current)
    },
    async search (page) {
      try {
        this.loadingData = true
        const { limit } = this.pagination
        const offset = ((page || 1) - 1) * limit
        const data = { offset, limit, ...this.searchParams }
        const res = await http.req(api.ticket_list, [1], data)
        if (!res) return
        res.list.forEach(item => {
          item.is_opened = false
        })
        this.list = res.list
        this.pagination.total = res.count
      } catch (err) {
        this.list = []
        this.pagination.total = 0
        console.log(err)
      } finally {
        this.loadingData = false
      }
    },
    // ticket_export() {
    //     this.transformQueryTime();
    //     let listQuery = this.listQuery;
    //     let params = {
    //         keyword: listQuery.keyword ? listQuery.keyword : null,
    //         state: listQuery.state ? parseInt(listQuery.state) : null,
    //         district: listQuery.district ? listQuery.district : null,
    //         block: listQuery.block ? listQuery.block : null,
    //         device_type: listQuery.device_type ? parseInt(listQuery.device_type) : null,
    //         start_time: listQuery.start_time ? listQuery.start_time : null,
    //         end_time: listQuery.end_time ? listQuery.end_time : null
    //     };
    //     http.exportTable(this, api.ticket_export, [1], params);
    // },
    handleModalOpen (ticket, modalName, result) {
      this.modal.acceptanceResult = result
      this.modal[modalName + 'Visible'] = true
      this.modal.ticket = ticket
    }
  }
}
</script>
<style lang='less'>
.bot20 {
    bottom: -20px;
}
.bot200 {
    bottom: -200px;
}
.no-data {
    background: #fff;
    padding: 50px 0;
    text-align: center;
}
.work_flow {
    text-align: center;
    padding: 26px 0 0 0;
}
.work_flow_state {
    font-size: 22px;
    color: #5b5b5b;
    margin-bottom: 10px;
}
.work_flow_user {
    font-size: 14px;
    color: #5b5b5b;
    margin-bottom: 13px;
}
.work_flow_line span {
    display: inline-block;
    width: 100%;
    border-top: 2px solid #bbbec4;
    margin-bottom: 10px;
    position: relative;
}
.work_flow_line span i {
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #05bac5;
}
.work_flow_creat {
    font-size: 14px;
    color: #5b5b5b;
}
.margin-bottom-23 {
    margin-bottom: 23px;
}
.c-ticket-item{
    background: none;
    
}
</style>